<template>
  <div class="container">
    <el-main>
      <div class="formType">
        <el-form
          :model="add"
          :rules="rules"
          ref="add"
          label-width="120px"
          class="demo-ruleForm"
        >
          <el-form-item label="id" prop="linkId">
            <el-input v-model="add.linkId" placeholder="为了保证id的唯一性,id由后台生成,用户不进行操作" disabled></el-input>
          </el-form-item>
          <el-form-item label="标题" prop="linkTitle">
            <el-input v-model="add.linkTitle"></el-input>
          </el-form-item>
          <el-form-item label="url" prop="url">
            <el-input v-model="add.url"></el-input>
          </el-form-item>
          <el-form-item label="发布时间" required>
            <el-form-item prop="publicationDate">
              <el-date-picker
              
                type="datetime"
                placeholder="选择日期"
                value-format="timestamp"
                v-model="add.publicationDate"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-form-item>
          <el-form-item label="最近访问时间" required>
            <el-form-item prop="dateLastAccessed">
              <el-date-picker
                type="datetime"
                placeholder="选择日期"
                value-format="timestamp"
                v-model="add.dateLastAccessed"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-form-item>
          <el-form-item label="链接类型" prop="category">
            <el-select
              v-model="add.category"
              placeholder="请选择链接类型"
              style="width: 100%"
            >
              <el-option label="文本超链接" value="文本超链接"></el-option>
              <el-option label="图像超链接" value="图像超链接"></el-option>
              <el-option label="E-mail链接" value="E-mail链接"></el-option>
              <el-option label="锚点链接" value="锚点链接"></el-option>
              <el-option
                label="多媒体文件链接"
                value="多媒体文件链接"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm()">立即添加</el-button>
            <el-button @click="resetForm()">重置</el-button>
            <el-button type="danger" @click="returnIndex()">返回主页</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-main>
  </div>
</template>


<script>
import axios from "axios";

export default {
  data() {
    return {
      add: {
        linkId: "",
        linkTitle: "",
        url: "",
        publicationDate: "",
        dateLastAccessed: "",
        category: "",
      },
      rules: {
        linkTitle: [
          { required: true, message: "请输入链接标题", trigger: "blur" },
          {
            min: 1,
            max: 20,
            message: "长度在 1 到 20 个字符",
            trigger: "blur",
          },
        ],
        url: [
          {
            required: true,
            type: "url",
            message: "请填写正确的url",
            trigger: "change",
          },
        ],

        category: [
          { required: true, message: "请选择链接类型", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    submitForm() {
      this.$refs['add'].validate((valid) => {
          if (valid) {
            axios
        .post("http://localhost:8080/link/addLink", this.add)
        .then((res) => {
          if (res.data == "0") {
            this.$message({
              type: "error",
              message: "添加失败",
            });
          } else {
            this.$message({
              type: "success",
              message: "添加成功!",
              onClose: () => this.$router.push("/"),
            });
          }
        });
          } else {
            this.$message({
              type: "error",
              message: "请填写数据",
            });
            return false;
          }
        });
      
    },
    resetForm() {
      this.add.linkId = "";
      this.add.linkTitle = "";
      this.add.url = "";
      this.add.publicationDate = "";
      this.add.dateLastAccessed = "";
      this.add.category = "";
    },
    returnIndex:function(){
        this.$router.push("/");
    }
  },
  created() {
    let params = JSON.parse(sessionStorage.getItem("params"));
    this.update = params;
    console.log(this.update);
  },
};
</script>

<style>
.container {
  display: flex;
  justify-content: center;
  align-content: center;
}
.container .formType {
  width: 50%;
  height: 100%;
  margin: auto;
}
</style>
